<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <link rel="stylesheet" type="text/css" href="recursos/css/signup.css"/>
        <title>RetailShop</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="recursos/css/main.css"/>

    </h:head>
    <h:body>





        <h:outputText id="logo" value="RetailShop"/>
        <h:form>
            <p:commandButton value="DEBUG:Gen.Categ." ajax="false" action="#{startupBean.executeCategories}"/>
            <p:commandButton value="DEBUG:Login" action="#{loginManagedBean.notRegistred}"/>
        </h:form>






        <div id="signup">
            <f:view>
                <h:form>  
                    <p:commandButton id="btnGoLogin" value="Ir al login" action="#{loginManagedBean.goToLogin}" onclick="mostrar()"/>
                    <p:commandButton id="btnContinue" value="Continuar de todos modos" action="#{loginManagedBean.notRegistred}" style="opacity: 0.7" />          

                </h:form>
            </f:view>

        </div>
        <div id="signupForm">
            <h:form>

                <h:form id="formSignup">  

                    <p:panel id="panelSignup" header="Signup!" >  

                        <p:messages id="msgsSignup" />  

                        <h:panelGrid columns="3" >  

                            <h:outputLabel for="email" value="Email: "  />  
                            <p:inputText id="email" value="#{signupBean.user.email}" size="30"  validatorMessage="Debe ser un email válido"  maxlength="255" label="Email" required="true" >  
                                <p:watermark for="email" value="Ex: usuario@dominio.com"/>
                                <f:validateRegex pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$" />
                                <p:ajax update="msgEmail" event="keyup" />
                            </p:inputText>  
                            <p:message for="email" id="msgEmail" display="icon"/>  




                            <h:outputLabel for="password" value="Contraseña: " />  
                            <p:password id="password" value="#{signupBean.user.pass}" feedback="true" size="30" maxlength="15" label="Password" required="true" > 
                                <f:validateLength minimum="6" />  
                                <p:ajax update="msgPassword" event="keyup" />
                            </p:password>
                            <p:message for="password" id="msgPassword" display="icon" />  

                            <h:outputLabel for="password2" value="Rep. Contraseña: " />  
                            <p:password id="password2" value="#{signupBean.pass2}" size="30" maxlength="15" label="Rep. Password" required="true" > 
                                <f:validateLength minimum="2" />  
                                <p:ajax update="msgPassword2" event="keyup" />
                            </p:password>
                            <p:message for="password2" id="msgPassword2" display="icon" />  



                            <h:outputLabel for="name" value="Nombre: "  />  
                            <p:inputText id="name" value="#{signupBean.user.name}" size="30" maxlength="255" label="Nombre" required="true" >  
                                <p:watermark for="name" value="Ej. Alejandro"/>
                                <f:validateLength minimum="2" />  
                                <p:ajax update="msgName" event="keyup" />
                            </p:inputText>  
                            <p:message for="name" id="msgName" display="icon"/>  
                            
                            <h:outputLabel for="surname" value="Apellidos: "  />  
                            <p:inputText id="surname" value="#{signupBean.user.surname}" size="30" maxlength="255" label="Apellidos" required="true" >  
                                <p:watermark for="surname" value="Ej. Molina"/>
                                <f:validateLength minimum="2" />  
                                <p:ajax update="msgSurname" event="keyup" />
                            </p:inputText>  
                            <p:message for="surname" id="msgSurname" display="icon"/> 
                            
                            <h:outputLabel for="phone" value="Teléfono: "  />  
                            <p:inputText id="phone" value="#{signupBean.user.phone}" size="30" maxlength="255" label="Telefóno" required="true" >  
                                        <p:watermark for="phone" value="Ej. 67807XXXX"/>
                                             <f:validateRegex pattern="[0-9]{9}[0-9]*"/>
                                            <p:ajax update="msgPhone" event="keyup" />
                            </p:inputText>  
                            <p:message for="phone" id="msgPhone" display="icon"/> 

                            <h:outputLabel for="address" value="Dirección: "  />  
                            <p:inputTextarea rows="4" cols="30"  counter="counter" counterTemplate="{0} caracteres restantes." id="address" value="#{signupBean.user.address}"  maxlength="255" label="Dirección" required="true" >  
                                <p:watermark for="address" value="Ej. C. de la Piruleta Nº 123              CP: 41008 Sevilla"/>
                                <f:validateLength minimum="2" />  
                                <p:ajax update="msgAddress" event="keyup" />
                            </p:inputTextarea>  
                            <p:message for="address" id="msgAddress" display="icon"/> 
                            <p:spacer width="40" height="10" />
                            <h:outputText id="counter" style="font-size:10px" />
                            
                        </h:panelGrid>  
                        <p:spacer width="170" height="10" />
                        <p:commandButton id="btnUp" value="Suscribirse" update="panelSignup" action="#{signupBean.signup}" />  


                    </p:panel>  

                </h:form>  



            </h:form>

        </div>
    </h:body>
</html>

